<template>
  <el-row class="home" :gutter="20">
    <!-- 栏格一共24列 -->
    <el-col :span="8" style="margin-top: 20px">
      <!-- 卡片 -->
      <el-card shadow="hover">
        <div class="user">
          <img class="userImg" :src="userImg" />
          <div class="userinfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <!-- 分割线 -->
        <hr size="1" noshade="noshade" style="border: 1px #cccccc dotted" />
        <div class="loginInfo">
          <p>上次登录时间: 2022.3.16</p>
          <p>上次地点: 河北石家庄市</p>
        </div>
      </el-card>
      <el-card style="margin-top: 20px; height: 370px" shadow="hover">
        <el-table :data="tableData">
          <el-table-column v-for="(val,key) in tableLabel" :prop="key" :label="val" :key="key">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="margin-top: 20px">
      <div class="nums">
        <el-card shadow="hover" class="cards" v-for="item in countData" :key="item.name" :body-style="{ display:'flex',padding:0,}">
         <i class="icon" :class="`el-icon-${item.icon}`" :style="{background: item.color,}"></i>
         <div class="details">
          <p class="num">{{item.value}}</p>
          <p class="name">{{item.name}}</p>
         </div>
        </el-card>
      </div>
      <el-card class="line-chart" shadow="hover" style="height :240px">
        <div style="height:200px" ref="echarts"></div>
      </el-card>
      <div class="graph">
        <el-card class="histogram" shadow="hover">
          <div style="height:200px" ref="userEcharts"></div>
        </el-card>
        <el-card class="histogram" shadow="hover">
          <div style="height:200px" ref="videoEcharts"></div>
        </el-card>
      </div>
      
    </el-col>
  </el-row>
</template>

<script>
import { getData } from '../../api/data.js'
import *as echarts from 'echarts'
export default {
  data() {
    return {
      userImg: require("../../assets/touxiang.jpg"),
      tableData: [

      ],
      tableLabel: {
        name: "课程",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买",
      },
      countData:[
        {
          name:'今日支付订单',
          value:'1234',
          icon:'success',
          color:'#2ec7c9',
        },
        {
          name:'今日收藏订单',
          value:'210',
          icon:'star-on',
          color:'#ffb980',
        },
        {
          name:'今日未支付订单',
          value:'1234',
          icon:'s-goods',
          color:'#5ab1ef',
        },
        {
          name:'本月支付订单',
          value:'1234',
          icon:'success',
          color:'#2ec7c9',
        },
        {
          name:'本月收藏订单',
          value:'210',
          icon:'star-on',
          color:'#ffb980',
        },
        {
          name:'本月未支付订单',
          value:'210',
          icon:'s-goods',
          color:'#5ab1ef',
        },
      
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    getData().then(res =>{
      const {code,data} = res.data
      // console.log(res),
      if( code === 200){
        this.tableData = data.tableData
        const order = data.orderData
        const xData = order.date
        const keyArray = Object.keys(order.data[0])
        const series = []
        keyArray.forEach(key =>{
          series.push({
            name:key,
            data:order.data.map(item => item[key]),
            type:'line'
          })
        })
        const option = {
          xAxis:{
            data: xData
          },
          yAxis:{},
          legend:{
            data: keyArray
          },
          series
        }
        const E = echarts.init(this.$refs.echarts)
        E.setOption(option)
        // 用户图
        const userOption = {
          legend:{
            textStyle:{
              color:"#333",
            }
          },
          gril:[
            {
              left:'20%'
            },
            {
              left:'0',
              right:'0',
              top:'0'
            },
          ],
          // 提示框
          tooltip:{
            trigger:'axis',
          },
          xAxis:{
            type:'category',
            //类目轴
            data:data.userData.map(item => item.date),
            axisLine:{
              lineStyle:{
                color:'#333',
              },
            },
          },
            yAxis:[
              {
                type:'value',
                axisLine:{
                  lineStyle:{
                    color:'#17b3a3',
                  },
                },
              },
            ],
            color:["#2ec7c9","#b6a2de"],
            series:[
              {
                name:'新增用户',
                data:data.userData.map(item => item.new),
                type:'bar',
              },
              {
                name:'活跃用户',
                data:data.userData.map(item => item.active),
                type:'bar',
              },
            ],
          
        }
        const U = echarts.init(this.$refs.userEcharts)
        U.setOption(userOption)
        const videoOption = {
          tooltip:{
            trigger:"item",
          },
          color:[
            "#0f78f4",
            "#dd536b",
            "#9462e5",
            "#a6a6a6",
            "#elbb22",
            "#39c362",
            "#3ed1cf",
          ],
          series:[
            {
              data: data.videoData,
              type: 'pie'
            }
          ],
        } 
        const V =echarts.init(this.$refs.videoEcharts)
        V.setOption(videoOption)
      }
      // console.log(res);
    })

    
  },
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
.text {
  color: #000;
}
.userImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.nums{
  display: flex;
  flex-wrap: wrap;
  /* align-content: space-between; */
  justify-content: space-around;
  /* margin: auto; */
}
.icon{
  height: 90px;
  width: 70px;
  /* 您可以使用字体大小更改图标的大小，而不是设置图标的高度和宽度 */
  font-size: 3em;
  text-align: auto;
}
.details{
  width: 220px;
}
.line-chart{
  margin-top: 15px;
}
.graph{
  display: flex;
  margin-top: 10px;
}
.histogram{
  height: 220px;
  width: 500px;
  margin-right: 15px;
}
</style>